<template>
	<div>
		<a-steps
			v-if="showStepBar"
			class="app-control-wizardpanel__header control-header"
			:current="current"
		>
			<a-step
				v-for="(step, index) in wizardSteps"
				:key="index"
				:class="step.cssName"
				:title="$t(step.lanResTag, step.title)"
			>
				<template v-if="step.icon" #icon>
					<AppIconText
						:imgPath="step.icon.imgPath"
						:iconClass="step.icon.iconClass"
					/>
				</template>
			</a-step>
		</a-steps>
		<div class="app-control-wizardpanel__content control-content">
			<slot name="form"></slot>
		</div>
		<div class="app-control-wizardpanel__footer control-footer">
			<AppButton v-if="!isHidden('PREV')" type="primary" @click="prev">
				{{
					buttonCaption.prevLanResTag || buttonCaption.prevCaption
						? $t(buttonCaption.prevLanResTag || '', buttonCaption.prevCaption)
						: $t('widget.wizardpanel.prev')
				}}
			</AppButton>
			<AppButton v-if="!isHidden('NEXT')" type="primary" @click="next">
				{{
					buttonCaption.nextLanResTag || buttonCaption.nextCaption
						? $t(buttonCaption.nextLanResTag || '', buttonCaption.nextCaption)
						: $t('widget.wizardpanel.next')
				}}
			</AppButton>
			<AppButton v-if="!isHidden('FINISH')" type="primary" @click="finish">
				{{
					buttonCaption.finishLanResTag || buttonCaption.finishCaption
						? $t(
								buttonCaption.finishLanResTag || '',
								buttonCaption.finishCaption
						  )
						: $t('widget.wizardpanel.finish')
				}}
			</AppButton>
		</div>
	</div>
</template>
<script setup lang="ts">
import { IParam } from '@/core';
import { Ref } from 'vue';
import { wizardPanelProps } from './wizard-panel';
const props = defineProps(wizardPanelProps);

const emit = defineEmits<{
	(name: 'prev', event: MouseEvent): void;
	(name: 'next', item: MouseEvent): void;
	(name: 'finish', item: MouseEvent): void;
}>();

const steps: Ref<string[]> = ref([]);

if (props.wizardSteps.length > 0) {
	props.wizardSteps.forEach((step: any) => {
		steps.value.push(step.stepTag);
	});
}

const current = computed(() => {
	return steps.value.indexOf(props.stepTags[props.activeEditForm.name]);
});

const isHidden = (type: string): boolean => {
	let hidden = false;
	if (props.wizardSteps.length > 0 && current.value >= 0) {
		const curActionStep = props.wizardSteps[current.value];
		const actionForm = props.wizardForms.find((form: IParam) => {
			return form.stepTag == curActionStep.stepTag;
		});
		if (
			actionForm &&
			actionForm.stepActions &&
			actionForm.stepActions.indexOf(type) < 0
		) {
			hidden = true;
		}
	}
	return hidden;
};

const prev = ($event: MouseEvent) => {
	emit('prev', $event);
};

const next = ($event: MouseEvent) => {
	emit('next', $event);
};

const finish = ($event: MouseEvent) => {
	emit('finish', $event);
};
</script>
